<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>视屏截图</title>
	</head>

	<body>
		<button onclick="doCaptureVideo()">截图</button>
		<video
			id="videoEL"
			controls
			autoplay
			crossorigin="anonymous"
			src="https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4"
			width="500"
		></video>

		<script>
			function captureVideo(videoEl) {
				let canvasEl;
				let dataUrl;
				try {
					const cps = window.getComputedStyle(videoEl);
					const width = +cps.getPropertyValue('width').replace('px', '');
					const height = +cps.getPropertyValue('height').replace('px', '');

					canvasEl = document.createElement('canvas');
					canvasEl.style.cssText = `position:fixed;left:-9999px`;
					canvasEl.height = height;
					canvasEl.width = width;

					document.body.appendChild(canvasEl);

					const ctx = canvasEl.getContext('2d');
					ctx.drawImage(videoEl, 0, 0, width, height);
					// const image = canvas.toDataURL("image/png");
					dataUrl = canvasEl.toDataURL();

					document.body.removeChild(canvasEl);
					canvasEl = null;
					return dataUrl;
				} finally {
					if (canvasEl) {
						document.body.removeChild(canvasEl);
					}
					if (dataUrl) {
						return dataUrl;
					}
				}
			}
			function download(url) {
				const aEl = document.createElement('a');
				aEl.href = url;
				aEl.download = '视频.png';
				aEl.click();
			}

			function doCaptureVideo() {
				const url = captureVideo(videoEL);
				download(url);
			}

			// 截图
			// doCaptureVideo()
		</script>
	</body>
</html>
